<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style type="text/css">
			body {
				height: 3000px;
				width: 100%;
				margin: 0;
				background: url(../img/千库网-星空背景.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			#tab_2{
				background-color: rgba(207, 207, 207, 0.1);
				transition: 1s;
			}
			#tab_1{
				transition: 1s;
			}
		</style>
	</head>

	<body>
		<header id="xx">
			<li id="tab_1" style="cursor: pointer">家乡</li>
			<li id="tab_2" style="cursor: pointer">个人简历</li>
		</header>
		<br />
		<br />
		<br />
		<br />
		<div id=""> </div>
		<div class="slider">
			<div class="slider-container">
				<div class="slider-wrapper">
					<div class="slide"> <img src="../img/1.png"> </div>
					<div class="slide"> <img src="../img/2.png"> </div>
					<div class="slide"> <img src="../img/3.png"> </div>
				</div>
			</div>
		</div>
		<div id="resume1">
			<div id="resume2">
				<img id="resume_img" src="../img/简历.jpg" />
			</div>
		</div>
		<div id="none">
		<div id="Hometown1">
			<div id="Hometown2">
				<img src="../img/1.jpg"/>
			</div>
			<p class="left_P">美丽的家乡海边</p>
		</div>
		<div id="Hometown">
			<div class="Hometown3">
				<img src="../img/3.jpg"/>
			</div>
			<p class="left_P">美丽的家乡海边</p>
		</div>
		<div id="Hometown">
			<div class="Hometown3">
				<img src="../img/2.jpg"/>
			</div>
			<p class="left_P">美丽的家乡海边</p>
		</div>
		</div>
		<script type="text/javascript">
			(function() {
				Slider.init({
					target: $('.slider'),
					time: 6000
				});
			})();
			window.onscroll = function() {
				var t = document.documentElement.scrollTop || document.body.scrollTop;
				var left_div = document.getElementById("resume2");
				var top_header = document.getElementById('xx')
				var left_Hometown1 = document.getElementById('Hometown2')
				console.log(t)
				if(t = 30) {
					top_header.style.backgroundColor = 'rgba(207, 207, 207, 0.1)'
				}
				if(t = 100) {
					left_div.style.left = '0'
					
				}
				if(t = 150){
					left_Hometown1.style.left = '0'
				}
				if(t = 600){
					$('.Hometown3').css('left','0')
				}
				
			}
			$('#tab_2').click(function() {
				$('#resume1').css('display', '')
				$('#tab_1').css('background-color','rgba(207, 207, 207, 0)')
				$('#tab_2').css('background-color','rgba(207, 207, 207, 0.1)')
				$('#none').css('display','none')
			})
			$('#tab_1').click(function() {
				$('#resume1').css('display', 'none')
				$('#none').css('display','block')
				$('#tab_2').css('background-color','rgba(207, 207, 207, 0)')
				$('#tab_1').css('background-color','rgba(207, 207, 207, 0.1)')
			})
		</script>

	</body>

</html>